<?php if (!defined('THINK_PATH')) exit();?><style>
    .daterangepicker.dropdown-menu, .select2-container--open {
        z-index: 99999999;
    }
    .select2-container--default .select2-selection--single, .select2-selection .select2-selection--single {
        height:30px;
    }
    .select2-result-repository__meta {
        margin-left: 0px;
    }
    .ztree li a.curSelectedNode {
        background-color: transparent;
        border:0px;
    }
    .layui-layer-shade  {
        left:inherit;
        top:50px;
        position:absolute;
    }
    .clear{clear:both;float:none;}
</style>
<div class="row" id="myapp">
    <pop-tree-organization-component></pop-tree-organization-component>

    <div class="col-xs-12" style="margin-bottom:10px;">
        <div style="background-color:#ffffff;overflow:hidden;padding:0 10px 10px 10px;border:1px solid #d2d6de;">
            <div style="float:left;margin-left:10px;margin-top:10px;">
                <span style="float:left;line-height:32px;">建仓时间：</span>
                <div class="input-group input-group-sm" style="width: 250px;float:left;">
                    <div class="input-group-addon"><i class="fa fa-calendar"></i></div>
                    <input type="text" v-model="data_cycle" id="data_cycle" class="form-control pull-right" readonly>
                </div>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <span style="float:left;line-height:32px;">成交机构：</span>
                <div class="input-group input-group-sm" style="width: 250px;">
                    <input type="text" v-model="organization_names" @click="openTreeOrganizationWin" class="form-control pull-right">
                </div>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <span style="float:left;line-height:32px;">所属经纪人：</span>
                <div class="input-group input-group-sm" style="width: 250px;">
                    <select id="agent_id" class="js-example-data-ajax form-control" tabindex="-1" aria-hidden="true"></select>
                </div>
            </div>
            <div class="clear"></div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <span style="float:left;line-height:32px;">用户昵称：</span>
                <div class="input-group input-group-sm" style="width: 250px;">
                    <input type="text" v-model="nick_name" name="keyword" class="form-control pull-right">
                </div>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <span style="float:left;line-height:32px;">手机号码：</span>
                <div class="input-group input-group-sm" style="width: 250px;">
                    <input type="text" v-model="mobile_phone" class="form-control pull-right">
                </div>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <span style="float:left;line-height:32px;">商品名称：</span>
                <div class="input-group input-group-sm" style="width: 250px;">
                    <select id="play_type" class="js-example-data-ajax form-control" tabindex="-1" aria-hidden="true"></select>
                </div>
            </div>
            <div class="clear"></div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <button @click="query()" type="button" class="btn btn-block btn-info btn-sm" style="width:100px;">查询</button>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;">
                <button @click="reset_query()" type="button" class="btn btn-default btn-sm" style="width:100px;">重置</button>
            </div>
            <div style="float:left;margin-left:10px;;margin-top:10px;display: none;">
                <button @click="exportexcel()" type="button" class="btn bg-purple btn-sm" style="width:100px;">导出查询</button>
            </div>
        </div>
    </div>

    <div class="col-xs-12">
        <div class="box box-danger">
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-striped table-hover">

                    <thead>
                    <tr>
                        <th style="width:35px;">#</th><th>订单编号</th><th>客户</th><th v-for="item in name_arr">{{item}}</th>
                        <th>货币&规格</th><th>涨&跌</th><th>建仓价格</th><th>点数</th><th>手数</th><th>定金</th><th>交易额</th><th>交易时间</th><th>手续费</th><th>成交机构</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(index, item) in list">
                        <td>{{index+1}}</td><td>{{item.order_no}}</td><td><a href="javascript:void(0)" @click="gotoInfoPage(item.user_id)">{{item.nick_name}}<span style="font-size:11px;color:grey;">{{item.mobile_phone}}</span></a></td>
                        <td v-for="i in value_arr">{{i | jgvalue item}}</td><td>{{item.agent_name}}</td><td>{{item.play_name}}-<span style="font-size:11px;color:grey;">{{item.norms}}</span></td>
                        <td v-if="item.type==1"><span class="badge bg-red">买涨</span></td><td v-if="item.type==2"><span class="badge bg-green">买跌</span></td>
                        <td>{{item.open_price}}</td><td>{{item.order_contact}}</td><td>{{item.mun}}</td><td>{{item.real_price | currency ''}}</td><td>{{item.real_price*item.mun | currency ''}}</td><td>{{item.begin_time}}</td>
                        <td>{{item.order_fee | currency ''}}</td><td>{{item.deal_organization}}</td>
                    </tr>

                    <tr>
                        <td>#</td><td>汇总：</td>
                        <td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td>
                        <td style="background-color:#dd4b39;color:#ffffff;">{{sum.sum_mun}}&nbsp;手</td>
                        <td style="background-color:#dd4b39;color:#ffffff;"">{{sum.sum_real_price | currency ''}}&nbsp;元</td>
                        <td style="background-color:#dd4b39;color:#ffffff;">{{sum.sum_order_price | currency ''}}&nbsp;元</td>
                        <td></td>
                        <td style="background-color:#dd4b39;color:#ffffff;"">{{sum.sum_fee_money | currency ''}}&nbsp;元</td>
                        <td></td>
                    </tr>

                    </tbody>
                </table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">
                <div id="info_data" class="col-sm-5" style="top:5px;">
                    当前为 {{startRow}} 至 {{endRow}} 条数据，共 {{total}} 条，每页 {{pageSize}} 条
                </div>
                <div class="col-sm-7">
                    <ul id="paging" class="pagination pagination-sm no-margin pull-right">
                        <li><a href="javascript:void(0);" @click="showPage(firstPage)">«</a></li>
                        <li><a href="javascript:void(0);" v-bind:class="{'page_active':pageNum==item}" @click="showPage(item)" v-for="item in navigatepageNums">{{item}}</a></li>
                        <li><a href="javascript:void(0);" @click="showPage(lastPage)">»</a></li>
                    </ul>
                </div>
            </div>
            <div class="overlay hidden">
                <i class="fa fa-refresh fa-spin"></i>
            </div>
        </div>
        <!-- /.box -->
    </div>
</div>

<div class="layui-layer-shade" id="layui-layer-shade" times="1" style="z-index:19891014; background-color:#ffffff; opacity:1; filter:alpha(opacity=1);"></div>
<div class="layui-layer layui-layer-loading  layer-anim" id="layui_layer" type="loading" times="1" showtime="0" contype="string" style="z-index: 19891015;"><div id="" class="layui-layer-content layui-layer-loading0"></div><span class="layui-layer-setwin"></span></div>

<script>
    var root = 'admin';
    var d = "<?php echo ($d); ?>";
    layuiLayerLoad();
</script>
<script src="./WebApp/Admin/View/Public/self/js/order/components.js"></script>
<script src="./WebApp/Admin/View/Public/self/js/order/current_vue.js"></script>
<script>
    var agent_id_select = null;
    $(function () {
        agent_id_select = $("#agent_id").select2({
            // placeholder: 'Select an option',
            language: "zh-CN",
            ajax: {
                type: 'post',
                url: root+'/agent/select_search',
                dataType: 'json',
                data: function(params) {
                    return {
                        keyword: params.term,
                        organization_ids: vue.organization_id
                    };
                },
                processResults: function (data, params) {
                    return {
                        results: data.list
                    };
                },
                cache: true
            },
            escapeMarkup: function(markup) { return markup; },
            minimumInputLength: 1,
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });
        agent_id_select.on("select2:select", function (e) {
            vue.agent_id = e.value;
        });
    });

    function formatRepo(repo) {
        if (repo.loading) return repo.text;

        var markup = "<div class='select2-result-repository clearfix'>";
        markup += "<div class='select2-result-repository__meta'>";
        markup += "<div class='select2-result-repository__title'>" + repo.name + "</div>";
        markup += "<div class='select2-result-repository__statistics'><div class='select2-result-repository__stargazers'>手机：" + repo.mobile_phone + "</div></div>";
        markup += "</div></div>";
        return markup;
    }

    function formatRepoSelection(repo) {
        var t = repo.name;
        vue.agent_id = repo.id;
        return t || repo.text;
    }
</script>

<script>
    var play_type_select = null;
    $(function () {
        play_type_select = $("#play_type").select2({
            // placeholder: 'Select an option',
            language: "zh-CN",
            ajax: {
                type: 'post',
                url: root+'/game_type/select_search',
                dataType: 'json',
                data: function(params) {
                    return {
                        keyword: params.term,
                        organization_ids: vue.organization_id
                    };
                },
                processResults: function (data, params) {
                    return {
                        results: data.list
                    };
                },
                cache: true
            },
            escapeMarkup: function(markup) { return markup; },
            minimumInputLength: 1,
            templateResult: play_type_formatRepo,
            templateSelection: play_type_formatRepoSelection
        });
        play_type_select.on("select2:select", function (e) {
            vue.play_type = e.value;
        });
    });

    function play_type_formatRepo(repo) {
        if (repo.loading) return repo.text;
        return repo.show_name;
    }

    function play_type_formatRepoSelection(repo) {
        var t = repo.show_name;
        vue.play_type = repo.id;
        return t || repo.text;
    }
</script>